<template>
    <div class="wrap">
        <ul class="list1">
            <li v-for="(item,index) in list" :key="index">
                <div class="img">
                    <img :src="item.img">
                </div>
                <p class="title">{{item.title}}</p>
                <p class="txt">{{item.txt}}</p>
            </li>
        </ul>
        <div class="juji">
            <h3>剧集</h3>
            <div class="juji-img">
                <img src="../../../public/img/5.png" alt="">
                <span>更新至10集</span>
            </div>
            <p class="title">今生有你</p>
            <p class="txt">钟汉良李小冉虐恋情深</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:"Box",
    data(){
        return {
            list:[],
        }
    },
    created(){
        this.a1();
    },
    methods:{
        async a1(){
            let {data} = await axios.get('./1.json');
            this.list = data.a;
        }
    }
}
</script>
<style scoped>
    .wrap{
        width: 100%;
    }
    .list1{
        width:100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: .4rem;
        justify-content: space-around;
    }
    .list1>li{
        width: 48%;
    }
    .list1>li>.img{
        width: 100%;
    }
    .list1>li>.img>img{
        width: 100%;
    }
    .list1>li>.title,.list1>li>.txt{
        padding-left: .2rem;
        padding-top: .2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .36rem;
    }
    .list1>li>.txt{
        padding-bottom: .4rem;
    }
    .juji{
        width: 100%;
        margin-bottom: .2rem;
    }
    .juji>h3{
        margin-left: .3rem;
        margin-bottom: .2rem;
    }
    .juji>.juji-img{
        width: 100%;
        position: relative;
    }
     .juji>.juji-img>img{
         width: 100%;
     }
    .juji>.juji-img>span{
        position: absolute;
        color: #fff;
        bottom: .2rem;
        right: .2rem;
        font-size: .2rem;
    }
    .juji>.title{
        margin-top: .2rem;
        margin-left: .3rem;
    }
    .juji>.txt{
        color: #999;
        font-size: .2rem;
        margin-left: .3rem;
        margin-top: .1rem;
    }
</style>